<template>
	<view class="container flex-center flex-column">
		<view class="top-container">
			<!-- 	<view class="top-box-box">
				<image class="top-bottom-right-img" :src="`${VUE_APP_STATIC_URL}static/images/coin_top_right_bg.png`">
				</image>
				
			</view> -->
			<view class="top-box">
				<view class="top-title-box">
					<view class="top-title">我的{{coinName}}:
					</view>
					<view class="top-title1">转赠中的{{coinName}}:{{froze}}</view>
				</view>
				<view class="top_box2">
					<view class="left">
						<view class="top-balance">{{balance}}</view>
						<view class="top-release">今日平台释放{{releaseTotal}}个{{coinName}}</view>
					</view>
					<view class="right">
						<view class="top-exchange-coupon"
							@click="handleJump('../../pages_category_page2/compisteCoupon/exchange')">兑通券凭证</view>
					</view>
				</view>
				<view class="top-transfer-container">
					<view class="top-transfer-box-left" @click="handleJump('../../pages_category_page2/coin/transfer')">
						<view class="top-transfer">转赠好友</view>
					</view>
					<view class="top-transfer-box-right"
						@click="handleJump('../../pages_category_page2/coin/transferRecord')">
						<view class="top-transfer-list">转赠记录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="withdraw-history">
			<view class="history-list">
				<view class="history-head">
					<view class="head-line"></view>
					<label class="head-label fs30 font-color-333">{{coinName}}明细</label>
				</view>
				<view class="history-content border-bottom-Line" v-for="(item, index) in historyList" :key="index">
					<view class="withdraw-detail flex-items flex-sp-between">
						<view class="detail-top">
							<view class="detail-bottom">
								<label class="">{{item.createTime}}</label>
							</view>
							<view class="cardNum">
								<label>{{item.bak}}</label>
							</view>
						</view>
						<view>
							<label class="apply-balance" :class="{'on':item.amount>0}">{{item.amount}}个{{coinName}}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed
	} from "vue";
	import {
		request
	} from "@/utils/request";
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	const memberData = ref({
		accountInfo: {
			balance: 0,
			froze: 0
		},
		releaseTotal: 0
	})
	const froze = ref(0);
	const balance = ref(0)
	const releaseTotal = ref(0)
	const historyList = ref([]);
	const coinName = ref('')
	const historyQueryParam = ref({
		pageNum: 1,
		pageSize: 100,
		condition: {
			curType: 4
		}
	})

	onMounted(() => {
		GetUser()
		//getCompisteCouponExchangeConfig()
		GetHistoryList()
		nextTick(()=>{
			coinName.value = getApp().globalData.coinName
		})
	})
	const GetUser = async () => {
		try {
			const res = await request(API.getUserCoinInfo, {}, 'GET')
			const data = res.data
			balance.value = data && data.accountInfo ? data.accountInfo.balance : 0
			froze.value = data && data.accountInfo ? data.accountInfo.froze : 0
			releaseTotal.value = data ? data.releaseTotal : 0
		} catch (err) {}
	}
	const GetHistoryList = async () => {
		try {
			const res = await request(API.queryAccountFlowList, historyQueryParam.value, 'POST')
			console.log(JSON.stringify(res))
			historyList.value = res.data.list
		} catch (err) {
			console.log(err.message)
		}
	}
	const handleJump = (url) => {
		if (url.startsWith('function')) {
			const [key, funcName] = url.split(':')
			functionObj[funcName]()
		} else {
			uni.navigateTo({
				url
			})
		}
	}
</script>

<style lang="scss">
	page {}

	.container {
		// padding: 20rpx;

		.top-container {
			background-color: #F3641E;
			border-radius: 0 0 48rpx 48rpx;
			height: fit-content;
			color: #FFF;

			.top-box {
				border-radius: 18rpx;
				padding: 60upx 60upx;
				display: fixed;
				z-index: 99;

				.top-title-box {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					vertical-align: bottom;

					.top-title {
						flex: 1;
						font-size: 40rpx;
						margin-top: 12rpx;
						font-weight: 600;
					}

					.top-title1 {
						font-size: 28rpx;
					}
				}

				.top_box2 {
					display: flex;
					flex-direction: row;

					.left {
						flex: 1;

						.top-balance {
							font-size: 48rpx;
							margin-top: 20rpx;
							font-weight: 800;
						}

						.top-release {
							font-size: 24rpx;
							font-weight: 400;
							margin-top: 8rpx;
							color: #FFD5AB;
						}
					}

					.right {
						align-items: center;
						vertical-align: middle;
						padding-top: 35rpx;

						.top-exchange-coupon {
							width: fit-content;
							font-size: 24rpx;
							color: #F3641E;
							background-color: #FFF;
							border-radius: 16rpx;
							padding: 10rpx 30rpx 10rpx 30rpx;
						}
					}

				}

				.top-transfer-container {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					vertical-align: bottom;

					.top-transfer-box-left {
						.top-transfer {
							width: fit-content;
							font-size: 24rpx;
							margin-top: 20rpx;
							color: #FFF;
							border-radius: 16rpx;
							padding: 10rpx 30rpx 10rpx 30rpx;
							border: 2rpx solid #FFF;
						}
					}

					.top-transfer-box-right {
						.top-transfer-list {
							width: fit-content;
							font-size: 24rpx;
							margin-top: 20rpx;
							margin-left: 20rpx;
							color: #FFF;
							border-radius: 16rpx;
							padding: 10rpx 30rpx 10rpx 30rpx;
							border: 2rpx solid #FFF;
						}
					}
				}
			}

		}

		.withdraw-history {
			margin: 14rpx 30rpx;

			.history-list {
				background: white;
				border-radius: 18rpx;
				padding: 30rpx;
				height: 30%;

				.history-head {
					flex-direction: row;
					display: flex;

					.head-line {
						width: 10rpx;
						background-color: #000;
						display: none;
					}

					.head-label {
						margin-left: 10rpx;
						color: #000;
					}
				}

				.history-content {
					border-top: 2rpx solid #F3F4F5;
					padding: 0 15rpx;

					.withdraw-detail {
						height: 150rpx;

						.apply-balance {
							font-size: 28rpx;
							font-weight: 600;
							background: #EEEEEE;
							display: block;
							text-align: center;
							color: #F3641E;

							&.on {
								color: #2FAB73;
							}
						}

						.detail-top {

							.detail-bottom {
								color: #000;
								font-size: 28rpx;
								line-height: 40rpx;
								font-weight: 400;
							}

							.cardNum {
								color: #828588;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 34rpx;
								margin-top: 10rpx;
							}
						}

					}
				}
			}
		}
	}

	.content {
		font-size: 35rpx;
		width: 500rpx;

		.btn {
			margin-bottom: 20rpx;
			width: 200rpx;
			background-image: linear-gradient(135deg, #FFA100 10%, #FF7911 100%);
		}
	}
</style>